<template>
  <section class="pay">
    <div style="border-bottom: 1px solid #dfdfdf;margin: 0 15px">
      <x-input type="number" placeholder="请输入充值金额"></x-input>
    </div>
    <p style="padding: 15px"> 支付方式</p>
    <group>
      <radio  v-model="selected" :options="radio003" @on-change="change"></radio>
    </group>
    <div class="btn-box">
      <x-button :gradients="buttonColor" @click.native="doNext">确认支付</x-button>
    </div>
  </section>
</template>

<script>
  import {XInput, Group, XButton, Radio} from 'vux'

  export default {
    name: 'payFirst',
    components: {
      XInput,
      Group,
      XButton,
      Radio
    },
    data () {
      return {
        buttonColor: ['#1D62F0', '#19D5FD'],
        selected: 'weixin',
        radio003: [{
          icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
          key: 'weixin',
          value: '微信'
        }, {
          icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
          key: 'zfb',
          value: '支付宝'
        }, {
          icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
          key: 'yhk',
          value: '银行卡'
        }]
      }
    },
    methods: {
      doNext () {
        this.$router.push({path: '/paycode'})
      },
      change (i) {
        console.log(i)
      }
    }
  }
</script>

<style lang="less" scoped>
  .pay {
    height: 100%;
    background-color: #fff;
    .btn-box {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 15px;
      box-sizing: border-box;
    }
  }
</style>
